{% extends "base.html" %}

{% block content %}
    <style>
        #result {
            padding: 10px;
            background-color: #eee;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .svgAnimationClass {
            animation: svgAnimationAnimate 3000ms linear infinite normal forwards;
        }

        @keyframes svgAnimationAnimate {
            0% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1);
            }
            10% {
                transform: translate(347.905081px, 389.743687px) scale(0.5, 0.5);
            }
            23.333333% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1.642254);
            }
            36.666667% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1);
            }
            46.666667% {
                transform: translate(347.905081px, 389.743687px) scale(0.5, 0.5);
            }
            56.666667% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1);
            }
            66.666667% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1.642254);
            }
            73.333333% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1);
            }
            83.333333% {
                transform: translate(347.905081px, 389.743687px) scale(0.5, 0.5);
            }
            90% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1);
            }
            100% {
                transform: translate(347.905081px, 389.743687px) scale(1, 1.642254);
            }
        }
    </style>
    <h4>AI智能机器人</h4>
{% endblock %}

{% block myjavascript %}

    <audio id="audio" src="/static/audio/{{ music_list[0] }}" controls></audio>

    <div class="container">
        <div class="left-control">
            <svg
            width="300px"
            height="300px"
            id="el9Nd8tiUpj1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="100 100 466.66669 466.66669"
            shape-rendering="geometricPrecision"
            text-rendering="geometricPrecision"
    >
        <g transform="matrix(1.33333 0 0-1.33333-144.021282 802.090006)">
            <g>
                <g clip-path="url(#el9Nd8tiUpj99)">
                    <g transform="translate(256.474 400.569)">
                        <path
                                d="M0,0c4.757-2.017,8.677-5.928,13.707-7.111c3.802-.894,8.016.005,11.157,2.321c1.548,1.143,2.423,2.999,3.034,5.024h.002l.017.059c.104.348.201.699.291,1.053L31.09,11.752l-7.151,1.122-1.903-4.38c-1.015,2.146-2.031,4.293-3.046,6.439-.118.25-.249.514-.487.656-.293.175-.664.115-.999.05-1.032-.2-2.065-.401-3.098-.601-.481-.093-1.013-.219-1.288-.625-.212-.314-.215-.72-.202-1.098.066-1.928.36-3.848.873-5.708-1.732,1.613-3.29,3.413-4.637,5.358-1.871-1.018-3.821-1.891-5.827-2.608C4.61,7.785,6.359,5.445,8.462,3.485C6.311,3.77,4.226,4.539,2.406,5.72C1.604,3.813,0.802,1.907,0,0"
                                fill="#002c48"

                        />
                    </g>
                    <g transform="translate(314.454 374.287)">
                        <path
                                d="M0,0c-3.381.312-7.922,1.159-10.484,2.925-2.534,1.747-4.709,3.966-6.633,6.372l-4.2-6.71c5.9-5.514,13.381-9.32,21.317-10.818Z"
                                fill="#002c48"

                        />
                    </g>
                    <g transform="translate(273.778 393.262)">
                        <path
                                d="M0,0L10.612,7.6c2.945-2.919,5.459-5.715,8.466-8.67.966-.951,1.933-1.903,2.895-2.851c1.276-1.261,2.546-2.514,3.794-3.76-1.194-4.673-3.403-9.088-6.427-12.845-2.414,1.85-4.809,3.634-7.088,5.495-3.839,3.144-7.338,6.512-10.01,10.826-.191.303-.374.608-.555.921C1.074,-2.217,0.489,-1.128,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(276.02 389.058)">
                        <path
                                d="M0,0c3.739-.856,7.416-1.836,11.189-2.626c2.146,1.839,3.928,3.702,5.647,5.761.967-.952,1.934-1.903,2.895-2.852-1.76-2.79-3.816-5.398-6.126-7.759-1.147-1.17-2.353-2.283-3.595-3.35C6.171,-7.683,2.672,-4.314,0,0"
                                fill="#002c48"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(274.646 403.326)">
                        <path
                                d="M0,0c-.479-1.782-.052-3.784,1.112-5.216-.515.634-.237,2.735-.147,3.49.147,1.237.512,2.458,1.162,3.526.451.738,1.726,2.437-.034,1.319C1.064,2.465,0.308,1.147,0,0"
                                fill="#08395c"
                        />
                    </g>
                    <g transform="translate(428.397 331.157)">
                        <path
                                d="M0,0c-4.184,3.032-7.126,7.723-11.763,10.003-3.505,1.725-7.813,1.793-11.394.24-1.764-.765-3.034-2.379-4.083-4.215h-.002l-.029-.054c-.18-.315-.353-.635-.521-.96l-5.142-9.495l6.717-2.697l2.838,3.842l1.525-6.958c.059-.27.127-.557.326-.748.247-.237.621-.262.963-.273c1.051-.037,2.102-.073,3.154-.109.49-.017,1.036-.014,1.395.32.277.258.371.653.443,1.024.368,1.894.512,3.831.43,5.759c1.326-1.96,2.44-4.064,3.317-6.262c2.052.573,4.148.986,6.264,1.235-.676,2.795-1.856,5.467-3.466,7.849c2.032-.759,3.892-1.977,5.401-3.536C-2.418,-3.356,-1.209,-1.678,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(378.685 378.201)">
                        <path
                                d="M0,0c-.005-2.742.13-5.714.773-8.38c3.289-.989,5.571-2.717,7.89-5.251c2.077-2.271,3.7-4.921,5.035-7.698l5.597,5.598C14.591,-8.75,7.796,-3.184,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(413.171 342.158)">
                        <path
                                d="M0,0l-12.046-5.027c-2.215,3.506-4.038,6.794-6.306,10.348-.729,1.144-1.458,2.288-2.182,3.428-.961,1.514-1.918,3.02-2.854,4.514c2.211,4.287,5.353,8.093,9.143,11.077c1.938-2.344,3.872-4.62,5.676-6.944c3.036-3.925,5.691-7.992,7.327-12.796.118-.338.228-.676.334-1.021C-0.55,2.402,-0.224,1.209,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(411.93 346.758)">
                        <path
                                d="M0,0c-3.452,1.673-6.815,3.452-10.316,5.068-2.504-1.31-4.657-2.727-6.794-4.347-.729,1.144-1.458,2.288-2.182,3.427c2.34,2.325,4.93,4.405,7.71,6.188c1.38.884,2.805,1.698,4.254,2.459C-4.291,8.871,-1.637,4.804,0,0"
                                fill="#002c48"

                        />
                    </g>
                    <g transform="translate(332.821 313.652)">
                        <path
                                d="M0,0c-.134,2.76.369,12.508-4.638,11.175-2.502-.666-2.941-3.178-3.167-5.452-.264-2.651-.344-5.35-.441-8.013-.102-2.781-.651-6.249,1.052-8.687.777-1.112,2.108-2.336,3.562-2.1C1.554,-12.233,0.164,-3.364,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(328.281 308.646)">
                        <path
                                d="M0,0c-.037-.102-.082-.208-.134-.317-.636-1.369-1.702-2.48-2.264-3.954-.545-1.433-.912-2.931-1.246-4.42-.614-2.757-1.18-5.533-1.441-8.342-.175-1.877-.195-3.827.155-5.667.252-1.327.696-2.597,1.405-3.745.244-.395.516-.769.818-1.119h-5.867c-.101.463-.175.964-.223,1.481-.066.656-.098,1.344-.106,2.02-.025,1.616.065,3.191.052,4.27-.061,3.985.257,7.995,1.413,11.826.208.692.448,1.38.729,2.048.208.492.439.973.696,1.437.419.757.916,1.469,1.506,2.101C-3.326,-1.111,-1.706,-0.179,0,0"
                                fill="#ededed"
                        />
                    </g>
                    <g transform="translate(340.51 281.081)">
                        <path
                                d="M0,0h-14.936c-.302.35-.574.725-.818,1.119-.709,1.149-1.153,2.419-1.405,3.746-.35,1.84-.33,3.79-.155,5.666.261,2.809.827,5.586,1.441,8.342.334,1.49.701,2.988,1.246,4.421.562,1.474,1.628,2.585,2.264,3.953.052.11.097.215.134.317.378.045.761.049,1.144.013c2.166-.208,4.043-1.702,5.231-3.526.212-.325.407-.663.586-1.006.346-.667.631-1.367.88-2.084.342-.973.61-1.974.867-2.972c1.03-3.993,1.901-8.031,2.605-12.098.256-1.466.493-2.935.708-4.405.07-.497.139-.989.208-1.486"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(336.122 302.043)">
                        <path
                                d="M0,0c-1.274-1.621-1.889-3.741-2.451-5.793-.13-.472-.546-.729-1.009-.769-1.792-.164-3.595-.367-5.391-.436-.826-.033-1.64-.049-2.214.664-.733.899-.684,2.527-1.095,3.602-.513,1.339-1.278,2.577-2.39,3.416.208.492.44.973.696,1.437c1.499-.912,2.537-2.349,3.204-4.092.277-.732.391-1.514.651-2.247.371-1.038.387-.855,1.507-.749c1.404.131,2.809.285,4.213.42.709,2.459,1.608,4.917,3.4,6.631.345-.667.63-1.368.879-2.084"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(340.51 281.081)">
                        <path
                                d="M0,0h-20.803c-.232,1.062-.313,2.296-.329,3.501c1.066,1.217,2.206,2.369,3.485,3.363c2.251,1.75,5.015,2.991,7.864,2.898c3.278-.106,6.184-1.905,8.867-3.871C-0.574,3.933,-0.269,1.97,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(344.833 275.381)">
                        <path
                                d="M0,0h-29.686c1.019,2.622,2.488,5.064,4.336,7.181.049.062.102.118.155.179c1.083,1.218,2.333,2.341,3.713,3.204c1.319.827,2.755,1.417,4.295,1.641c2.019.289,4.087-.085,6-.773c2.5-.904,4.771-2.378,6.656-4.246c1.307-1.299,2.43-2.785,3.31-4.401C-0.737,1.893,-0.326,0.961,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(344.833 275.381)">
                        <path
                                d="M0,0h-29.686c1.019,2.622,2.488,5.064,4.336,7.181.049-.516,10.939-5.088,13.907-5.495c3.419-.473,6.9.17,10.222,1.099C-0.737,1.893,-0.326,0.961,0,0"
                                fill="#ededed"
                        />
                    </g>
                    <g transform="translate(368.027 313.652)">
                        <path
                                d="M0,0c-.134,2.76.369,12.508-4.638,11.175-2.502-.666-2.941-3.178-3.167-5.452-.264-2.651-.344-5.35-.441-8.013-.102-2.781-.651-6.249,1.052-8.687.777-1.112,2.108-2.336,3.562-2.1C1.554,-12.233,0.164,-3.364,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(363.487 308.646)">
                        <path
                                d="M0,0c-.037-.102-.082-.208-.134-.317-.636-1.369-1.702-2.48-2.264-3.954-.545-1.433-.912-2.931-1.246-4.42-.614-2.757-1.18-5.533-1.441-8.342-.175-1.877-.195-3.827.155-5.667.252-1.327.696-2.597,1.405-3.745.244-.395.517-.769.817-1.119h-5.866c-.101.463-.175.964-.223,1.481-.066.656-.098,1.344-.106,2.02-.025,1.616.065,3.191.052,4.27-.061,3.985.257,7.995,1.413,11.826.208.692.448,1.38.729,2.048.208.492.439.973.696,1.437.419.757.916,1.469,1.506,2.101C-3.326,-1.111,-1.706,-0.179,0,0"
                                fill="#ededed"
                        />
                    </g>
                    <g transform="translate(375.716 281.081)">
                        <path
                                d="M0,0h-14.937c-.3.35-.573.725-.817,1.119-.709,1.149-1.153,2.419-1.405,3.746-.35,1.84-.33,3.79-.155,5.666.261,2.809.827,5.586,1.441,8.342.334,1.49.701,2.988,1.246,4.421.562,1.474,1.628,2.585,2.264,3.953.052.11.097.215.134.317.378.045.761.049,1.144.013c2.166-.208,4.042-1.702,5.231-3.526.212-.325.407-.663.586-1.006.346-.667.631-1.367.879-2.084.343-.973.611-1.974.868-2.972c1.03-3.993,1.901-8.031,2.605-12.098.256-1.466.493-2.935.708-4.405.07-.497.139-.989.208-1.486"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(371.327 302.043)">
                        <path
                                d="M0,0c-1.274-1.621-1.889-3.741-2.451-5.793-.13-.472-.545-.729-1.009-.769-1.791-.164-3.595-.367-5.39-.436-.826-.033-1.641-.049-2.214.664-.733.899-.685,2.527-1.096,3.602-.513,1.339-1.278,2.577-2.389,3.416.207.492.439.973.696,1.437c1.498-.912,2.536-2.349,3.204-4.092.276-.732.39-1.514.651-2.247.371-1.038.387-.855,1.506-.749c1.405.131,2.809.285,4.214.42.708,2.459,1.608,4.917,3.399,6.631.346-.667.631-1.368.879-2.084"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(375.716 281.081)">
                        <path
                                d="M0,0h-20.803c-.232,1.062-.313,2.296-.329,3.501c1.066,1.217,2.206,2.369,3.485,3.363c2.251,1.75,5.015,2.991,7.865,2.898c3.277-.106,6.183-1.905,8.866-3.871C-0.574,3.933,-0.269,1.97,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(380.039 275.381)">
                        <path
                                d="M0,0h-29.685c1.018,2.622,2.487,5.064,4.335,7.181.049.062.102.118.155.179c1.083,1.218,2.333,2.341,3.713,3.204c1.319.827,2.756,1.417,4.295,1.641c2.019.289,4.087-.085,6-.773c2.5-.904,4.771-2.378,6.656-4.246c1.307-1.299,2.43-2.785,3.31-4.401C-0.737,1.893,-0.326,0.961,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(380.039 275.381)">
                        <path
                                d="M0,0h-29.685c1.018,2.622,2.487,5.064,4.335,7.181.049-.516,10.939-5.088,13.907-5.495c3.42-.473,6.9.17,10.222,1.099C-0.737,1.893,-0.326,0.961,0,0"
                                fill="#ededed"
                        />
                    </g>
                    <g transform="translate(386.738 350.833)">
                        <path
                                d="M0,0c0-.721-.008-1.441-.021-2.162-.016-.997-.048-1.995-.089-2.992-.09-2.231-.228-4.458-.379-6.676-.203-2.96-.452-6.013-1.811-8.651-1.515-2.943-4.254-5.056-7.084-6.782-16.646-10.166-42.855-10.178-59.522,0-2.825,1.726-5.565,3.839-7.083,6.782-1.356,2.638-1.608,5.691-1.807,8.651-.123,1.803-.237,3.611-.326,5.422-.049,1.002-.09,2.007-.118,3.009-.012.501-.025.997-.037,1.498-.012.928-.016,1.856-.004,2.784.049,4.523.431,9.026,1.441,13.43c1.05,4.593,2.866,9.111,5.484,13.023c2.239,3.355,5.072,6.258,8.504,8.379c6.587,4.071,15.706,3.094,23.709,3.024c8.004.07,17.119,1.047,23.705-3.024c2.94-1.816,5.431-4.197,7.491-6.949c3.167-4.218,5.321-9.287,6.502-14.453.862-3.785,1.27-7.645,1.396-11.528C-0.017,1.86,0,0.928,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(386.738 350.833)">
                        <path
                                d="M0,0c0-.721-.008-1.441-.021-2.162-.016-.997-.048-1.995-.089-2.992-3.428-.264-6.884-.191-10.247.411-1.082.196-1.636,1.319-1.738,2.28-.586,5.602-2.911,11.781-7.136,15.625-4.841,4.404-11.778,4.392-17.905,3.733-6.269-.676-13.479-1.657-18.51-5.802-4.8-3.948-6.925-10.23-8.904-15.901-.366-1.05-1.249-1.828-2.409-1.832-3.734-.02-7.455-.004-11.163.232-.049,1.002-.09,2.007-.118,3.009-.012.501-.025.997-.037,1.498c3.167-.049,6.335-.049,9.498.138c1.933,5.52,4.185,11.098,8.426,15.254c4.34,4.255,10.235,6.176,16.097,7.21c5.81,1.026,11.859,1.824,17.725.867c5.573-.908,10.316-3.88,13.605-8.451c2.854-3.961,4.169-8.549,5.142-13.239C-5.167,-0.155,-2.582,-0.159,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(378.791 379.599)">
                        <path
                                d="M0,0c-.932-.306-1.889-.558-2.841-.802-9.836-2.54-19.83-4.677-29.979-5.162-9.73-.468-18.771,1.006-28.009,3.941-.801.256-1.693.411-2.581.594c2.24,3.354,5.073,6.257,8.505,8.378c6.587,4.071,15.706,3.094,23.709,3.025c8.004.069,17.118,1.046,23.705-3.025C-4.551,5.133,-2.06,2.752,0,0"
                                fill="#ededed"
                        />
                    </g>
                    <g transform="translate(330.155 347.744)">
                        <path
                                d="M0,0c-.979-6.562,1.64-13.532,6.651-17.879c5.011-4.348,12.24-5.962,18.644-4.229c4.388,1.186,8.419,3.942,10.735,7.854c2.836,4.791,2.87,10.862,1.182,16.168-1.407,4.421-4.011,8.541-7.757,11.279C18.174,21.441,1.979,13.256,0,0"
                                fill="#ededed"
                        />
                    </g>
                    <g transform="translate(332.249 347.399)">
                        <path
                                d="M0,0c-.872-5.841,1.46-12.046,5.921-15.917c4.461-3.87,10.896-5.307,16.597-3.765c3.907,1.057,7.495,3.51,9.557,6.993c2.524,4.265,2.555,9.669,1.052,14.393-1.252,3.936-3.571,7.604-6.905,10.042C16.179,19.087,1.762,11.801,0,0"
                                fill="#ccc"
                        />
                    </g>
                    <g transform="translate(334.62 347.008)">
                        <path
                                d="M0,0c-.75-5.025,1.256-10.364,5.094-13.694s9.375-4.566,14.28-3.239c3.361.909,6.448,3.019,8.222,6.016c2.172,3.669,2.198,8.319.905,12.383-1.078,3.386-3.072,6.542-5.941,8.639C13.919,16.422,1.516,10.153,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(337.771 346.489)">
                        <path
                                d="M0,0c-.589-3.942.985-8.129,3.996-10.741c3.01-2.612,7.352-3.581,11.199-2.541c2.637.714,5.058,2.369,6.449,4.719c1.704,2.878,1.725,6.525.71,9.712-.845,2.657-2.409,5.132-4.659,6.777C10.918,12.881,1.189,7.963,0,0"
                                fill="#85e2ea"
                        />
                    </g>
                    <g transform="translate(340.35 346.064)">
                        <path
                                d="M0,0c-.456-3.054.764-6.299,3.096-8.323c2.333-2.023,5.698-2.775,8.679-1.969c2.043.553,3.919,1.836,4.997,3.657c1.32,2.23,1.336,5.056.55,7.526-.655,2.058-1.867,3.976-3.611,5.251C8.46,9.981,0.921,6.171,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(341.332 345.902)">
                        <path
                                d="M0,0c-.405-2.716.679-5.602,2.753-7.401c2.075-1.8,5.067-2.468,7.718-1.751c1.817.491,3.486,1.632,4.444,3.251c1.174,1.984,1.189,4.497.49,6.693-.583,1.831-1.661,3.536-3.212,4.669C7.523,8.876,0.819,5.487,0,0"
                                fill="#b6faff"
                        />
                    </g>
                    <g transform="translate(329.037 331.86)">
                        <path
                                d="M0,0c-1.649,1.256-2.71,2.863-4.055,4.387-.649.736-1.938-.04-1.643-.956.682-2.126,2.421-4.106,4.007-5.622C-0.259,-3.56,1.634,-1.244,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(325.199 329.14)">
                        <path
                                d="M0,0c-.869.705-1.571,1.543-2.386,2.297-.267.246-1.48,1.325-1.893.835-.509-.604.033-1.77.404-2.314.62-.909,1.438-1.707,2.26-2.432C-0.505,-2.593,1.129,-0.916,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(370.872 334.555)">
                        <path
                                d="M0,0c-.567-.572-.87-1.431-1.252-2.137-.402-.742-.942-1.406-1.333-2.148-.537-1.017.709-1.942,1.558-1.203.683.594,1.217,1.466,1.687,2.234.456.743.989,1.684.995,2.568C1.662,0.153,0.589,0.595,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(374.076 332.866)">
                        <path
                                d="M0,0c-.414-.846-.868-1.69-1.353-2.497-.48-.799-1.181-1.502-1.577-2.339-.472-.998.512-2.167,1.566-1.566.947.539,1.625,1.53,2.242,2.408.658.935,1.115,1.918,1.494,2.994C2.856,0.376,0.647,1.323,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(381.682 386.132)">
                        <path
                                d="M0,0c-7.768-4.865-17.114-7.873-25.085-9.042-11.957-1.75-29.006-.325-41.748,6.018-11.232,5.589-19.109,15.001-17.2,29.416.81,6.111,3.469,11.517,7.36,15.938c2.866,3.257,6.404,5.976,10.369,8.052.932.489,1.881.941,2.846,1.36c1.237.546,2.503,1.034,3.782,1.474c5.992,2.06,12.371,3.069,18.706,3.639c7.665.692,16.809.574,25.512-1.115c1.328-.257,2.639-.55,3.937-.884c8.871-2.267,16.952-6.362,22.069-13.141c2.683-3.549,4.551-7.832,5.296-12.978C17.697,15.946,10.202,6.375,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(381.682 386.132)">
                        <path
                                d="M0,0c-7.768-4.865-17.114-7.873-25.085-9.042-11.957-1.75-29.006-.325-41.748,6.018-11.232,5.589-19.109,15.001-17.2,29.416.81,6.111,3.469,11.517,7.36,15.938c5.142-3.22,8.041-9.53,8.248-15.673.224-6.709-2.267-13.227-5.439-19.142c10.882-8.48,25.025-12.245,38.813-11.749c13.788.501,27.231,5.056,39.285,11.765-5.419,5.692-6.037,14.831-2.972,22.069c2.011,4.747,5.345,8.757,9.286,12.115c2.683-3.549,4.551-7.832,5.296-12.978C17.697,15.946,10.202,6.375,0,0"
                                fill="#ededed"
                        />
                    </g>
                    <g transform="translate(294.221 407.684)">
                        <path
                                d="M0,0c.187-3.414.921-6.923,2.97-9.66.943-1.259,2.233-2.365,3.784-2.62c2.911-.479,5.427,2.128,6.704,4.786c2.408,5.009,2.479,10.957.816,16.26-1.173,3.74-5.143,8.452-9.212,5.216C1.159,10.88,-0.255,4.648,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(293.169 407.843)">
                        <path
                                d="M0,0c.166-3.014.813-6.112,2.623-8.529.832-1.112,1.97-2.088,3.341-2.313c2.57-.423,4.791,1.879,5.919,4.226c2.125,4.422,2.188,9.675.72,14.356-1.036,3.302-4.541,7.462-8.134,4.606C1.024,9.606,-0.225,4.104,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(400.966 408.53)">
                        <path
                                d="M0,0c-.187-3.413-.921-6.923-2.97-9.66-.943-1.259-2.233-2.364-3.784-2.62-2.911-.478-5.427,2.128-6.704,4.787-2.408,5.008-2.479,10.957-.816,16.259c1.173,3.741,5.143,8.452,9.212,5.217C-1.16,10.88,0.255,4.648,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(402.017 408.69)">
                        <path
                                d="M0,0c-.165-3.014-.813-6.113-2.622-8.529-.832-1.112-1.971-2.088-3.341-2.313-2.57-.423-4.791,1.879-5.919,4.226-2.126,4.422-2.188,9.674-.721,14.356c1.037,3.302,4.541,7.462,8.134,4.606C-1.023,9.606,0.225,4.104,0,0"
                                fill="#fff"
                                stroke="gray"
                        />
                    </g>
                    <g transform="translate(381.682 386.132)">
                        <path
                                d="M0,0c-1.278-.802-2.601-1.551-3.953-2.251-6.856-3.554-14.472-5.813-21.132-6.791-10.442-1.526-24.764-.635-36.712,3.839-1.735.648-3.42,1.372-5.036,2.179c1.148,4.701,1.747,9.566,2.312,14.386.92,7.866,1.792,15.739,2.61,23.616.053.509.114,1.05.427,1.458.273.354.696.557,1.103.744c1.112.505,2.235.982,3.371,1.433-.965,1.828-1.913,3.668-2.849,5.512-1.185,2.333-2.341,4.674-3.363,7.08-.073.175-.155.354-.236.537c1.237.546,2.503,1.034,3.782,1.474.13-.224.248-.436.366-.627c1.29-2.113,2.471-4.283,3.668-6.448c1.083-1.954,2.166-3.909,3.245-5.867c10.653,3.453,22.064,4.552,33.178,3.184.688,2.137,1.36,4.278,2.032,6.424.61,1.942,1.147,3.908,1.729,5.858c1.328-.257,2.639-.55,3.937-.884-.004-.02-.008-.044-.012-.064-.387-2.044-.884-4.072-1.376-6.091-.492-2.003-1.059-3.993-1.669-5.968.171-.028.342-.057.513-.089c1.03-.204,2.084-.436,2.947-1.026c1.681-1.144,2.264-3.31,2.72-5.288C-5.598,24.218,-2.801,12.111,0,0"
                                fill="#002c48"
                        />
                    </g>
                    <g transform="translate(377.729 383.881)">
                        <path
                                d="M0,0c-6.856-3.554-14.473-5.813-21.133-6.791-10.442-1.526-24.763-.635-36.712,3.839-.219,4.771.741,10.088,1.014,13.711.354,4.772.92,9.571,2.524,14.078c1.608,4.502,4.344,8.724,8.321,11.382c4.926,3.29,11.126,3.847,17.029,4.307c5.219.408,10.894.697,15.217-2.247c3.391-2.312,5.304-6.216,6.786-10.043C-3.44,19.178,-1.515,9.624,0,0"
                                fill="#08395c"
                        />
                    </g>
                    <g transform="translate(323.129 402.954)">
                        <path
                                d="M0,0c-.285-.916-.2-2.162.69-2.517.659-.263,1.386.121,1.977.513c1.175.778,2.294,1.641,3.346,2.579.516-1.024,1.124-2.001,1.815-2.916.578-.766,1.256-1.517,2.161-1.838.904-.321,2.079-.058,2.507.801.43.86-.02,1.881-.465,2.734-.787,1.509-1.597,3.05-2.845,4.207C5.587,6.903,1.274,4.097,0,0"
                                fill="#85e2ea"
                        />
                    </g>
                    <g transform="translate(371.927 404.095)">
                        <path
                                d="M0,0c.285-.916.2-2.162-.69-2.517-.659-.263-1.386.121-1.977.513-1.175.778-2.294,1.641-3.347,2.578-.515-1.023-1.124-2-1.814-2.915-.578-.766-1.256-1.517-2.161-1.838-.904-.321-2.079-.058-2.508.801-.429.86.021,1.881.466,2.734.787,1.509,1.597,3.05,2.845,4.207C-5.587,6.902,-1.274,4.097,0,0"
                                fill="#85e2ea"
                        />
                    </g>
                    <g
                            id="el9Nd8tiUpj97_ts"
                            class="abc"
                            transform="translate(347.905081,389.743687) scale(1,1)"
                    >
                        <g transform="translate(27.971834,9.704627)">
                            <path
                                    d="M0,0c-15.391,1.902-25.89-.154-28.503-.753-.423-.104-.647-.165-.647-.165s-1.509-12.433,15.694-12.495C0.823,-13.461,1.482,-0.192,1.482,-0.192C0.985,-0.121,0.486,-0.06,0,0"
                                    transform="matrix(.878514 0 0 0.480451-15.803708-6.672089)"
                                    fill="#85e2ea"
                            />
                        </g>
                    </g>
                    <clipPath id="el9Nd8tiUpj99">
                        <path d="M0,500h500v-500L0,0Z"/>
                    </clipPath>
                </g>
            </g>
            <g>
                <g clip-path="url(#el9Nd8tiUpj103)">
                    <clipPath id="el9Nd8tiUpj103">
                        <path d="M0,500h500v-500L0,0Z"/>
                    </clipPath>
                </g>
            </g>
        </g>
    </svg>
        </div>
        <div class="right-control">
            <textarea id="result">回答结果</textarea>
        </div>
    </div>





    <script src="../static/js/voice.js"></script>
    <script src="../static/js/chat.js"></script>
    <script src="../static/js/crypto-js.min.js"></script>
    <script type="text/javascript">

        {#
        $(function () {
            show_quota_info()

            $("#submitbtn").click(function () {
                var url = "/chatgpt-clone?question=" + $("#question").val()
                url = url.replace(/\s+/g, "")
                // console.log(url)
                gpt_show_stream_info(url)

            })

        })
         #}



        // 获取SVG动画对象
        var svgElement = document.getElementById('el9Nd8tiUpj97_ts');


        // 启动动画
        function startAnimation() {
            svgElement.classList.add('svgAnimationClass');
        }

        // 暂停动画
        function pauseAnimation() {
            svgElement.classList.remove('svgAnimationClass');
        }

        var audioElement = document.getElementById('audio');
        // 监听音频播放开始事件
        audioElement.addEventListener('play', function () {
            // 音频播放开始时触发的操作
            startAnimation();
        });

        // 监听音频暂停播放事件
        audioElement.addEventListener('pause', function () {
            // 音频暂停播放时触发的操作
            pauseAnimation();
        });

        audioElement.addEventListener('ended', function () {
            // 音频播放结束时触发的操作
            pauseAnimation();
        });

    </script>
{% endblock %}


{% block myquestion %}

    <div id="response-text" aria-placeholder="Hello! 请说出你想说话"></div>

    <section class="fixed-box" id="fixed-box">
        <div class="fixed-main">
            <div id="fixed-txt">Hello! 请说出你想说话。。。</div>
            <div class="fixed-icon">
                <img src="../static/images/voice.png" alt=""/>
            </div>
        </div>
    </section>

    <form action="/chatgpt-clone" method="post">
        {#        <div class="alert alert-success" id="quota_info"></div>#}
        <div>
            <textarea class="form-control" rows="2" cols="20" name="question" id="question" placeholder="敬请提问" disabled></textarea>
        </div>

        <div style="margin-top: 10px;" class="text-center">
            <button type="button" id="submitbtn" class="btn btn-primary">语音提问</button>
        </div>
    </form>



    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript">

        {#const voiceTxt = document.querySelector('#voice-txt');#}
        const voiceTxt = document.querySelector('#question');

        {#const startBtn = document.querySelector('#start-btn');#}
        const startBtn = document.querySelector('#submitbtn');


        const fixedBox = document.querySelector('#fixed-box');
        const fixedTxt = document.querySelector('#fixed-txt');
        const closeBtn = document.querySelector('#close-btn');
        let times = null;


        // 实例化迅飞语音听写（流式版）WebAPI
        const voice = new Voice({

            // 服务接口认证信息 注：apiKey 和 apiSecret 的长度都差不多，请要填错哦，！
            appId: '3133b059',
            apiSecret: 'ZTAzYmRlOGFiOWE4ZGYyNjFiOGZiZGVj',
            apiKey: '8cb2076e80e00f87086bd610316293f5',

            onWillStatusChange: function (oldStatus, newStatus) {
                //可以在这里进行页面中一些交互逻辑处理：注：倒计时（语音听写只有60s）,录音的动画，按钮交互等！
                fixedBox.style.display = 'block';
            },
            onTextChange: function (text) {
                //监听识别结果的变化
                voiceTxt.value = text;
                fixedTxt.innerText = text;

                // 3秒钟内没有说话，就自动关闭
                if (text) {
                    clearTimeout(times);
                    times = setTimeout(() => {
                        this.stop(); // voice.stop();
                        fixedBox.style.display = 'none';

                        // 获取GPT答案
                        getGptAnswer();
                    }, 3000);
                }
            }
        });

        // 按下开启语音识别
        startBtn.addEventListener('mousedown', function () {

            // 停止音频播放
            var audioElement = document.getElementById('audio');
            audioElement.pause();
            audioElement.currentTime = 0;


            const question_textarea = document.getElementById('question');
            question_textarea.innerText = "";
            voice.start();
        });

        startBtn.addEventListener('mouseup', function () {
            {#在按钮松开时执行的动作#}
            voice.stop();
            fixedBox.style.display = 'none';
        });

        function getGptAnswer() {
            const voice_textarea = document.getElementById('question');
            console.log('内容：' + voice_textarea.value);

            if (voice_textarea.value.trim() !== '') {
                var url = "/chatgpt-clone?question=" + voice_textarea.value;
                url = url.replace(/\s+/g, "");
                gpt_show_stream_info(url);

            } else {
                console.log('无效的提问内容！')
            }

        }


    </script>
{% endblock %}